import React from 'react';
import { Tabs } from 'antd';
import { formatMessage, connect } from 'umi';
import style from '../Gateway.less';

class ThreeList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        const { TabPane } = Tabs;
        const {
            gateway: { threeApp }
        } = this.props;
        return (
            <div className={style.bgfff}>
                <Tabs defaultActiveKey="other1">
                    <TabPane
                        tab={formatMessage({
                            id: 'list.others2.title'
                        })}
                        key="other1"
                        className={style.wnappTab}
                    >
                        {threeApp.map(item => (
                            <a
                                key={item.name}
                                className={
                                    item.length < 4
                                        ? style.wnapp
                                        : style.wnapp_s
                                }
                                href={item.url}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                {item.name}
                            </a>
                        ))}
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}
export default connect(({ gateway }) => ({
    gateway
}))(ThreeList);
